<template>
  <div class="user-content default-radius">
    <div class="header">
      <h3 class="title">部门列表</h3>
      <el-button type="primary" @click="handleCreatePageRecord">新建部门</el-button>
    </div>
    <div class="table">
      <el-table :data="statePageList" :border="true" style="width: 100%">
        <el-table-column align="center" type="selection" label="选择" />
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column align="center" prop="name" label="部门名称" width="180" />
        <el-table-column align="center" prop="leader" label="部门领导" width="180" />
        <el-table-column align="center" prop="parentId" label="上级部门" width="180">
          <template #default="scope">{{ findParentDepartName(scope.row.parentId) }}</template>
        </el-table-column>
        <!--        <el-table-column align="center" prop="enable" label="状态" width="120">-->
        <!--          <template #default="scope">-->
        <!--            <el-button :type="scope.row.enable ? 'success' : 'danger'" plain size="small">-->
        <!--              {{ scope.row.enable ? '启用' : '禁用' }}-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" prop="createAt" label="创建时间">
          <template #default="scope">
            {{ utcFormat(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateAt" label="更新时间">
          <template #default="scope">
            {{ utcFormat(scope.row.updateAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              icon="EditPen"
              link
              @click="handleEditPageRecord(scope.row)"
            >
              编辑
            </el-button>
            <el-popconfirm
              confirm-button-text="删除"
              confirm-button-type="danger"
              cancel-button-text="取消"
              icon="InfoFilled"
              icon-color="#f56c6c"
              title="您确定要删除吗？"
              @confirm="handleDeletePageRecord(scope.row.id)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  link
                  @click="console.log(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="statePageTotalCount ? Number(statePageTotalCount) : 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSystemStore } from '@/store/mian/system';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { utcFormat } from '@/utils/format-util';
import { useMainStore } from '@/store/mian';
const systemStore = useSystemStore();
const mainStore = useMainStore();
// const usersList = computed(() => {
//   return systemStore.stateUserList;
// });
const { statePageList, statePageTotalCount } = storeToRefs(systemStore);
const { stateEntireDepartments } = storeToRefs(mainStore);

function findParentDepartName(parentId: number) {
  let parentName = '';
  if (stateEntireDepartments.value) {
    for (let i = 0; i < stateEntireDepartments.value.length; i++) {
      if (stateEntireDepartments.value[i].id === parentId) {
        parentName = stateEntireDepartments.value[i].name;
      }
    }
  }
  return parentName;
}

const currentPage = ref(1);
const pageSize = ref(10);

fetchPageListData();

/**
 * @function handleSizeChange 改变每页表格条数，表格会自动修改绑定的pageSize属性
 */
function handleSizeChange() {
  fetchPageListData();
}

/**
 * @function handleCurrentChange 改变当前页码，表格会自动修改绑定的currentPage属性
 */
function handleCurrentChange() {
  fetchPageListData();
}

/**
 * @function fetchPageListData 获取当前组件的表格数据
 * @param formData
 */
function fetchPageListData(formData: any = {}) {
  const size = pageSize.value;
  const offset = (currentPage.value - 1) * size;
  const queryInfo = { ...formData, offset, size };
  systemStore.fetchPageListDataAction('department', queryInfo);
}

/**
 * 定义传递给父组件的事件
 */
const emits = defineEmits(['createRecord', 'editRecord']);

/**
 * @function handleEditPageRecord 编辑表格中的某一行
 * @param itemData
 */
function handleEditPageRecord(itemData: any) {
  emits('editRecord', itemData);
}

/**
 * @function handleDeletePageRecord 删除表格中的某一行
 * @param id
 */
function handleDeletePageRecord(id: number) {
  systemStore.deleteRecordByIdAction('department', id);
  currentPage.value = 1;
}

/**
 * @function handleCreatePageRecord 新建表格中的某一行
 */
function handleCreatePageRecord() {
  emits('editRecord');
}

/** 对外暴露的方法 */
defineExpose({
  // 允许父组件调用刷新数据
  fetchPageListData
});
</script>

<style scoped lang="scss">
.user-content {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 40px;

  .header {
    display: flex;
    height: 45px;
    padding: 0 5px;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 20px;
      font-weight: 700;
    }

    .handler {
      align-items: center;
    }
  }

  .table {
    :deep(.el-table__cell) {
      padding: 14px 0;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    padding-right: 20px;
  }
}
</style>
